<template>
  <div class="l-from-body" style="padding: 8px 48px 8px 48px">
    <el-divider content-position="left">{{$t('我的头像')}}</el-divider>
    <el-avatar :size="100" fit="cover" :src="imageUrl || avatar">
      {{ loginInfo.f_Account.slice(0, 2) }}
    </el-avatar>
    <l-upload
      style="margin-top: 16px"
      accept=".jpeg,.jpg,.png"
      :showFileList="false"
      :autoUpload="false"
      isTip
      maxSize="2"
      sizeType="MB"
      :limit="1000"

      @change="handleChange"
      @success="handleAvatarSuccess"
    />
  </div>
</template>

<script>
const api = window.$api.organization.user
export default {
  name: "user-head",
  data() {
    return {
      imageUrl: "",
      saveBtnDisabled: true,
      loading: false,
    };
  },
  computed: {
    avatar: function () {
      return this.loginInfo.f_HeadIcon
        ? 
        `${this.apiUrl}system/annexesfile/${this.loginInfo.f_HeadIcon}?token=${this.token}`
        : ``;
    },
  },
  methods: {
    handleChange(fileUrl) {
      this.imageUrl = fileUrl;
    },
    async handleAvatarSuccess({file}) {
      let fileId = file.id
      if(!this.$validatenull(this.loginInfo.f_HeadIcon) && this.loginInfo.f_HeadIcon != fileId){
        await this.lr_deleteFile(this.loginInfo.f_HeadIcon)
      }
      this.loginInfo.f_HeadIcon = fileId;
      await api.update(this.loginInfo.f_UserId,{user:this.$deepClone(this.loginInfo)})
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.loading = false;
        this.$message.error(this.$t("上传头像图片大小不能超过 2MB!"));
      }
      return isLt2M;
    },
  },
};
</script>